<template>
  <FullscreenCard class="wrapper">
		<div class="grid" ref="gridDom"></div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import FullscreenCard from '@/components/FullscreenCard'
import * as Highcharts from 'highcharts'
// 加载导出模块
import * as Exporting from 'highcharts/modules/exporting'
// 初始化导出模块
Exporting(Highcharts)

const codeSelectVisible = ref<Boolean>(false)

const gridDom = ref<any>(null)

const onClickOutside = () => {
  codeSelectVisible.value = false
}

const getData = (n:number) => {
    let arr = [],
        i:number,
        a:any,
        b:any,
        c:any,
        spike;
    for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
            a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
            b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
            c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
            spike = 10;
        } else {
            spike = 0;
        }
        arr.push([
            i,
            2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
        ]);
    }
    return arr;
}

let n = 200000
const list = getData(n)

const initChart = () => {
  const option = {
    chart: {
      zoomType: 'xy'
    },
    boost: {
      useGPUTranslations: true
    },
    title: {
      text: 'Highcharts drawing ' + n + ' points'
    },
    tooltip: {
      valueDecimals: 2
    },
    series: [{
      data: list,
      lineWidth: 0.5
    }]
  }

  Highcharts.chart(gridDom.value, option)

  window.addEventListener( 'resize', () => {
    Highcharts.resize()
  } )
}
onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
